<template>
	<view class="find">
		<!-- 头部吸顶 -->
		<Ceiling :navHeight='navHeight' :navTitle='navTitle'></Ceiling>
		<!-- 伪盒子 称高 -->
		<view class="box"></view>
		<!-- banner -->
		<bannerItem :bannerImg="swpArr"></bannerItem>
		<!-- newList -->
		<view class="new">
			<view class="new-titleList">
			    <view  v-for="(item,index) in titleArr" :key="index" class="new-titleList-item" :class="titleIndex===index ? 'active-new-title':''" @click="getNewItem(index)"><text>{{item}}</text></view>
			</view>
			<newItem v-for="(item,index) in itemNewArr.newList" :newitem='item' :newStyle='findStyle'></newItem>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 吸顶标题
				navTitle:'发现',
				//banner图片
				swpArr:['../../static/imgs/findationimgs/1.jpg','../../static/imgs/findationimgs/2.jpg','../../static/imgs/findationimgs/3.jpg'],
				//导航栏的高
				navHeight:0,
				//头部新闻数据数组
				titleArr:['通知公告','学校新闻','综合信息','学术动态'],
				//头部索引
				titleIndex:0,
				// 单个新闻数据数组
				itemNewArr:[],
				//新闻阴影及对应的间距
				findStyle:{
					mt:20,
					mb:40,
					pad:20,
					bs:'0px 3px 3px rgba(0, 0, 0, .1)'
				},
				//全部新闻数据数组
				newArr:[
					{
						newList:[
							{
								headline:'关于加强新生入学后校园安全管理规范的通知',
								from:'学校新闻网',
								img:'../../static/imgs/item3.png'
							},
							{
								headline:'关于开展2023新生入学教育系列培训课程指导意见',
								from:'信息化管理中心',
								img:'../../static/imgs/item2.png'
							},
							{
								headline:'关于加强新生入学后校园安全管理条例实行的通知',
								from:'教务处',
								img:'../../static/imgs/item1.png'
							},
						]
					},
					{
						newList:[
							{
								headline:'【万千气象看云南】西双版纳一个傣族村寨的“美丽”日记',
								from:'腾讯新闻',
								img:'../../static/imgs/item3.png'
							},
							{
								headline:'玉渊谭天：美财长来谈，先要想清楚几个问题',
								from:'腾讯新闻',
								img:'../../static/imgs/item2.png'
							},
							{
								headline:'男孩“想当农业发展银行行长继承家产”，家人身份披露：并不都是行长',
								from:'腾讯新闻',
								img:'../../static/imgs/item1.png'
							},
						]
					},
					{
						newList:[
							{
								headline:'现场视频！南部战区位中缅边境我方一侧举行联合实兵实弹演习',
								from:'腾讯新闻',
								img:'../../static/imgs/item3.png'
							},
							{
								headline:'斐济总理：中国援助在地区发展中发挥重要作用',
								from:'微博新闻',
								img:'../../static/imgs/item2.png'
							},
							{
								headline:'喊着“自由市场”实际“美国优先”',
								from:'微博新闻',
								img:'../../static/imgs/item1.png'
							},
						]
					},
					{
						newList:[
							{
								headline:'外媒：白宫称，沙利文因“肋骨骨折”推迟原定访问',
								from:'微博新闻',
								img:'../../static/imgs/item3.png'
							},
							{
								headline:'福特中国任命贾鸣镝为林肯中国总裁',
								from:'微博新闻',
								img:'../../static/imgs/item2.png'
							},
							{
								headline:'沙特超-C罗连场帽子戏法 利雅得胜利8-0艾卜哈',
								from:'微博新闻',
								img:'../../static/imgs/item1.png'
							},
						]
					},
				]
			}
		},
		methods: {
			getNewItem(index){
				this.itemNewArr = this.newArr[index]
				this.titleIndex = index
			}
		},
		onLoad() {
			//默认是第零个
			this.itemNewArr = this.newArr[0]
		},
		onShow() {
			//获取导航栏的高度
			let h = uni.getSystemInfoSync().statusBarHeight 
			this.navHeight = h
		}
	}
</script>

<style scoped lang="scss">
.find{
	padding: 0 40rpx;
	box-sizing: border-box;
	
	.box{
		height: 210rpx;
	}
	
	.banner{
		margin-top: 40rpx;
		position: relative;
		.banner-text{
			position: absolute;
			top: 60rpx;
			left: 40rpx;
			
			.banner-text-top{
				font-size: 28rpx;
				color: #fff;
			}
			
			.banner-text-bottom{
				display: flex;
				flex-direction: column;
				font-size: 20rpx;
				color: #fff;
				margin-top: 20rpx;
			}
		}
		
	}
	
	
	.new{
	   margin-top: 50rpx;
	   
	   .new-titleList{
	   	   display: flex;
	   	   align-items: center;
	   	   gap: 20rpx;
	   	   
	   	   .new-titleList-item{
	   		   text{
	   			   font-size: 28rpx;
	   			   font-weight: 600;
	   		   }
	   	   }
	   }
   }
}



  .active-new-title{
	   font-weight: 600;
	   border-bottom: 2px solid #03e391;
	   margin-bottom: 10rpx;
	   
	   text{
		   font-size: 36rpx !important;
	   }
	   
   }
</style>
